<template>
  <div
    class="tr"
    @click="onJump(source)"
  >
    <div
      class="td"
      v-for="i in options"
      :key="i.value"
      :style="{ width: `calc(100% / ${columnCount})`, color: i.setColor(source) }"
    >
      {{ i.format ? i.format(source[i.value]) : source[i.value] }}
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonEquipmentItem",
  props: {
    index: {
      type: Number
    },
    source: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Array,
      default: () => [],
    },
    columnCount: {
      type: Number,
      default: 3,
    },
    onJump: {
      type: Function,
      default: () => {},
    },
  },
  methods: {
  },
}
</script>

<style scoped lang="scss">

</style>
